﻿@page "/components/form"


<DocsPage>
    <DocsPageHeader Title="Form Validation" SubTitle="All about checking user input and visualization of errors" />
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader>
                <Title>Simple Form Validation</Title>
                <Description>
                    <CodeInline>MudForm</CodeInline> is designed to be easy and simple. You just pass your own validation functions directly into the <CodeInline>Validation</CodeInline> parameter of your input controls.
                    But if you want to make use of the handy data annotation attributes provided by Microsoft, you can pass them into <CodeInline>Validation</CodeInline> also. You can even use FluentValidation as is shown in another example below. <br />
                    <MudAlert Severity="Severity.Info" Dense="true" Class="mt-3">Note: for MudForm, do NOT use a button with <CodeInline>ButtonType="ButtonType.Submit"</CodeInline></MudAlert>
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true">
                <MudContainer>
                    <MudFormExample />
                </MudContainer>
            </SectionContent>
            <SectionSource ShowCode="false" Code="MudFormExample" GitHubFolderName="Form" />
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title>EditForm Support</Title>
                <Description>
                    In Blazor form validation is usually done with EditForm in conjunction with a form model class that is decorated with <MudLink Href="https://docs.microsoft.com/en-us/aspnet/core/mvc/models/validation?view=aspnetcore-3.1">data annotations</MudLink>. MudBlazor's input components support
                    Blazor's form validation if you put them into a <CodeInline>&lt;EditForm&gt;</CodeInline>. The following example shows a very simple use case. If you want to learn more please check out
                    <MudLink Href="https://docs.microsoft.com/en-us/aspnet/core/blazor/forms-validation?view=aspnetcore-3.1">ASP.NET Core Blazor forms and validation</MudLink> on the official Blazor documentation.
                    <br /><br />
                    <MudAlert Severity="Severity.Info" Dense="true" Class="mt-3">
                        Note: for EditForm validation to work make sure to set <CodeInline>ButtonType="ButtonType.Submit"</CodeInline> and do not use a MudForm.
                    </MudAlert>
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true">
                <MudContainer>
                    <EditFormExample />
                </MudContainer>
            </SectionContent>
            <SectionSource ShowCode="false" Code="EditFormExample" GitHubFolderName="Form" />
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title>Using Fluent Validation</Title>
                <Description>
                    This example shows how to make use of the powerful <MudLink Href="https://docs.fluentvalidation.net/en/latest/index.html">FluentValidation</MudLink> validators with MudForm. Basically, we call the validator in our 
                    validation func and simply return the error messages.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true">
                <MudContainer>
                    <FluentValidationExample />
                </MudContainer>
            </SectionContent>
            <SectionSource ShowCode="false" Code="FluentValidationExample" GitHubFolderName="Form" />
        </DocsPageSection>
    </DocsPageContent>
</DocsPage>

